<template>
<div>
  <div style="display: flex">
    <el-input placeholder="请输入角色英文名"
              v-model="role.name"
              size="small"
              style="width: 350px">
      <template slot="prepend" onresize="small">ROLE_</template>
    </el-input>
    <el-input
        placeholder="请输入角色中文名"
        v-model="role.nameZh"
        clearable
        style="width: 350px; margin: 0 10px 0"
    size="small">
    </el-input>
    <el-button type="primary" icon="el-icon-plus" size="small" @click="addRole">添加</el-button>
  </div>
  <div style="margin-top: 10px">
    <el-collapse  accordion @change="change" v-model="activeName">
      <el-collapse-item :title="r.nameZh" :name="r.id"
      v-for="(r,index) in this.roles" :key="index">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>可访问的资源</span>
            <el-button
                style="float: right; padding: 3px 0"
                type="danger" icon="el-icon-delete" @click="deleteRole(r.id,r.nameZh)">删除</el-button>
          </div>
          <el-tree
                    ref="tree"
                   :data="allMenu"
                   show-checkbox
                   :props="defaultProps"
                   node-key="id"
                   :default-expanded-keys="menuId"
                   :default-checked-keys="menuId"></el-tree>
          <div style="float: right; margin-bottom: 10px">
            <el-button type="primary" size="mini" @click="toUpdate(r.id,index)">确定修改</el-button>
            <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
          </div>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>
</div>
</template>

<script>
export default {
name: "PermissMana",
  data(){
  return{
    activeName:-1,
    role:{
      name:'',
      nameZh:''
    },
    roles:[],//获取角色列表
    allMenu:[], //获取所有菜单
    menuId:[], //根据角色id查询菜单id
    defaultProps:{
      children: 'children',
      label: 'name'
    },
  }
  },
  methods:{
    deleteRole(rid,nameZh){//删除角色
      this.$confirm('是否要删除' + nameZh +'角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/permission/delete?id='+rid).then(res=>{
          if(res){
            this.initRole()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addRole(){ //添加角色
      if(this.role.name && this.role.nameZh){
        this.postRequest('/system/basic/permission/add',this.role).then(res=>{
          if(res){
            this.initRole()
            this.role.name = ''
            this.role.nameZh = ''
          }
        })
      }else {
        this.$message.error('请输入角色名')
      }
    },
    cancelUpdate(){  //取消修改关闭折叠面板
      this.activeName = -1
    },
  toUpdate(rid,index){ //修改
    //1.要拿到选中的tree
    let tree = this.$refs.tree[index]
    //2.拿到选中的菜单id     ( 不要二级菜单) getCheckedKeys是element ui的一个方法，可以把选中的节点所组成的数组获取到
    let checkedTree = tree.getCheckedKeys(true)
    //3.因为url较长，可以处理下
    let url = '/system/basic/permission/updatemenus?rid=' + rid
    checkedTree.forEach(key=>{
      url = url+'&mids=' + key
    })
    this.putRequest(url).then(res=>{
      if(res){
        this.initRole()
      }
    })
    this.activeName = -1
    },
  initAllRole(){  //获取所有角色菜单
    this.getRequest('/system/basic/permission/menus').then(res=>{
      if(res) {
        this.allMenu = res
      }
    })
  },
  initRole(){ //获取角色列表
    this.getRequest('/system/basic/permission/list').then(res=>{
      this.roles = res
    })
  },
    initMenu(rid){ //根据角色id查询菜单id
    this.getRequest('/system/basic/permission/mid?rid='+rid).then(res=>{
      if(res){
        this.menuId = res
      }
    })
    },
    change(rid){  //根据id打开卡片获取信息
    if(rid){
      this.initAllRole()
      this.initMenu(rid)
    }
    }
  },
  mounted() {
  this.initRole()
  }
}
</script>

<style scoped></style>